<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/homepage.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <title>首页</title>
    <style>
        /*<!--轮播底部样式-->*/
        .swiper-pagination-bullet-active{
            background-color: #D6A195;
        }
    </style>
</head>

<body>
<div id="app">
    <header class="mui-bar head">
        <!--下拉-->
        <div class="nav-sel">
            <select name="sele" id="sele" v-model="sele" @change="optio">
                <option :value="v.id" v-for="v in preve">{{v.name}}</option>
            </select>
        </div>
        <!--搜索-->
        <a href="search.html">
            <img src="images/icon_search.png" alt="">
            <span>名片搜索</span>
        </a>
    </header>
    <main>
        <div class="mui-content main">
            <!-- 头部Swiper 轮播-->
            <div class="swip">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="ite in swip"><a :href="ite.url"><img :src="ite.image" alt=""></a> </div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <!--公告 swiper 轮播-->
            <a href="topline.html" class="not-swip">
                <img src="images/icon_toutaio.png" alt="">
                <div class="swips">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="items in texts">{{items.title}}</div>
                        </div>
                    </div>
                </div>
                <img src="images/icon_more1.png" alt="">
            </a>
            <!--名片推荐-->
            <div class="card">
                <div class="card-top">
                    <span> </span>
                    <span>--名片推荐--</span>
                    <a href="javascript:void(0)"><img src="images/icon_more3.png" alt=""></a>
                </div>
                <div class="card-mian">
                    <div class="card-mi" v-for="(item , index) in card" v-if="item.Roof == 1">
                        <div v-if="item.isoverdue == 1">
                            <p v-if="index = 0" class="pic0">TOP.{{index+1}}</p>
                            <p v-if="index = 1" class="pic1">TOP.{{index+1}}</p>
                            <p v-if="index = 2" class="pic2">TOP.{{index+1}}</p>
                        </div>
                        <p v-if="item.isoverdue == 2" class="oldp">过期</p>
                        <div @click="cards(item.id)" class="card-mipic">
                            <img :src="item.image2" alt="">
                            <img :src="item.image2" alt="">
                        </div>
                        <dl>
                            <dt>{{item.title}}</dt>
                            <dd>
                                <div class="card-see">
                                    <img src="images/icon_eye.png" alt="">
                                    <span>{{item.browse}}</span>
                                </div>
                                <div class="card-coll">
                                    <img src="images/icon_shoucang.png" alt="">
                                    <span>{{item.collection}}</span>
                                </div>
                                <div class="card-pop" v-show="prop == index">
                                    <li @click="props(item.id,item.collected,index)">
                                        <img v-if="item.collected == false" src="images/index_shoucang.png" alt="">
                                        <img v-if="item.collected == true" src="images/icon_shoucang.png" alt="">
                                        <span>收藏</span>
                                    </li>
                                    <img src="images/shuxian.png" alt="">
                                    <li @click="tel(item.phone)">
                                        <img src="images/index_tel.png" alt="">
                                        <span>电话</span>
                                    </li>
                                </div>
                                <img src="images/icon_more2.png" alt="" @click="show(index)">
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <footer>
        <div class="foot">
            <a href="#">
                <img src="images/icon_indexs.png" alt="首页">
                <span>首页</span>
            </a>
            <a href="cdisplay.html">
                <img src="images/icon_show.png" alt="名片展示">
                <span>名片展示</span>
            </a>
            <a href="personal.html">
                <img src="images/icon_mys.png" alt="我的">
                <span>我的</span>
            </a>
        </div>
    </footer>
</div>
<script src="js/mui.min.js"></script>
<script src="js/swiper.min.js"></script>
<script type="text/javascript" charset="utf-8">
    const API_PROXY = 'https://bird.ioliu.cn/v1/?url='
    new Vue({
        el:'#app',
        data(){
            return{
                prop:-1,//隐藏收藏
                preve:'',//获取到的所有省份
                sele:'',//获取到当前选中的值  
                seles:'',//根据ip获取到的地址省份
                card:'',//获取相应省份的名片
                texts:'',//获取的文章列表
                swip:'', //轮播图
            }
        },
        created(){
            this.loca();//获取到缓存的省份
            this.province();//获取省份
            this.text();//公告文章列表
            this.swipes();//轮播图
            this.overdue();//检测是否过期
        },
        methods:{
            //显示隐藏  电话收藏
            show(index){
                if (index == this.prop) {
                    if (index == 0){
                        this.prop = -1;
                    }else{
                        this.prop = -index;
                    }
                }else{
                    this.prop = index;
                }
            },
            //收藏
            props(id,coll,index){
                //收藏
                if(coll == false){
                    axios.post(API_PROXY + 'mingpian.32one.top/Index/Index/collect',`cardId=${id}`)
                        .then(res=>{
                            if (res.data.code == 0){
                                mui.toast(res.data.msg)
                                this.card[index].collected = true;
                            }else{
                                mui.toast(res.data.msg)
                            }
                        })
                }else{
                    // 取消收藏
                    axios.post(API_PROXY + 'mingpian.32one.top/Index/Index/unCollect',`cardId=${id}`)
                        .then(res=>{
                            if (res.data.code == 0){
                                mui.toast(res.data.msg)
                                this.card[index].collected = false;
                            }else{
                                mui.toast(res.data.msg)
                            }
                        })
                }
            },
            //电话
            tel(phone){
                location.href="tel:"+phone;
            },
            //获取缓存
            loca(){
                this.sele = localStorage.getItem("sid");
                this.ip();//根据ip获取位置
            },
            //下拉框获取的省份
            optio(){
                localStorage.setItem("sid",this.sele); //本地缓存
                location.href="homepage.html"
                // this.select();
            },
            //获取省份
            province(){
                axios.post(API_PROXY + 'mingpian.32one.top/Index/Login/getProvinceList')
                    .then(res=>{
                        this.preve = res.data.data;
                    })
            },
            //根据ip获取位置
            ip(){
                axios.post(API_PROXY + 'mingpian.32one.top/Index/Index/getAddrByIp')
                    .then(res=>{
                        this.seles = res.data.data.province.id;
                        if (this.sele == null) {
                            this.sele = this.seles;
                        }
                        this.select();
                    })
            },
            //轮播图
            swipone(){
                var swiper = new Swiper('.swip .swiper-container', {
                    loop:true,
                    autoplay: {
                        delay: 2000,
                        disableOnInteraction: false,
                    },
                    pagination: {
                        el: '.swiper-pagination',
                    },
                    observer:true,
                    observeParents:true,
                });
            },
            //根据获取到的地址 去查询名片
            select(set){
                axios.post(API_PROXY + 'mingpian.32one.top/Index/Index/getCardByProvinceid',`provinceId=${this.sele}`)
                    .then(res=>{
                        console.log(res.data.data)
                        this.card = res.data.data;
                    })
            },
            //名片详情跳转 带参数
            cards(id){
                location.href="xiangqing.html?id="+id;
            },
            // 公告文章列表
            text(){
                axios.post(API_PROXY + 'mingpian.32one.top/Index/Index/getArticleList')
                    .then(res=>{
                        this.texts = res.data.data;
                        this.$nextTick(function () {//页面渲染成功之后才执行。
                            var swiper1 = new Swiper('.swips .swiper-container', {
                                direction: 'vertical',
                                loop:true,
                                autoplay:true,
                                observer:true,//修改swiper自己或子元素时，自动初始化swiper
                                observeParents:true,//修改swiper的父元素时，自动初始化swiper
                            });
                        })
                    })
            },
            // 轮播图
            swipes(){
                axios.post(API_PROXY + 'mingpian.32one.top/Index/Index/getBanner')
                    .then(res=>{
                        this.swip = res.data.data;
                        this.$nextTick(function () {//页面渲染成功之后才执行。
                            this.swipone();
                        })
                    })
            },
            //定时任务检测到过期就显示过期
            overdue(){
                axios.post(API_PROXY + 'mingpian.32one.top/Index/Login/checkOvertime')
                    .then(res=>{
                        console.log(res)
                    })
            }
    }
    })
</script>
</body>

</html>